import React, { Component } from 'react'
import { Input, Message } from 'element-react'
import { withRouter } from 'react-router-dom'
import Breadcrumb from '../../base/Breadcrumb'
import { formatDate } from '../../../common/js/index'
import '../goods.css'
import Quill from 'quill'
import 'quill/dist/quill.snow.css'

class skuCreatedDetail extends Component {
  constructor (props) {
    super(props)
    this.state = {
      value: '',
      imgs: [],
      id: this.props.match.params.id,
      startTime: '',
      endTime: ''
    }
    this.editor = null
  }
  componentDidMount () {
    const textbox = this.refs.textarea
    const toolbarOptions = [
      ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
      ['blockquote', 'code-block'],
      [{ 'header': 1 }, { 'header': 2 }],               // custom button values
      [{ 'list': 'ordered'}, { 'list': 'bullet' }],
      [{ 'script': 'sub'}, { 'script': 'super' }],      // superscript/subscript
      [{ 'indent': '-1'}, { 'indent': '+1' }],          // outdent/indent
      [{ 'direction': 'rtl' }],
      [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
      [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
      [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
      [{ 'font': [] }],
      [{ 'align': [] }],
      ['image', 'video'],
      ['clean']                                         // remove formatting button
    ]
    const options = {
      debug: 'warn',
      modules: {
        toolbar: toolbarOptions
      },
      placeholder: '请输入文本...',
      readOnly: false,
      theme: 'snow'
    }
    let editor =this.editor= new Quill(textbox,options)
    let {value}=this.state
    if (value) editor.clipboard.dangerouslyPasteHTML(value)
    editor.on('text-change', this.handleChange.bind(this))
    this.init()
  }
  handleChange () {
    let {value}=this.state
    value = this.editor.root.innerHTML
    this.setState({value},()=> {console.log(this.state.value)})
  }
  init () {
    this.$ajax.getSkuDetail(this.state.id).then(res => {
      if (res.code === 200) {
        let {repertory, status, unit, startTime, endTime, descrption, imgs} = res.data
        let value = descrption
        this.setState({repertory, status, unit, startTime, endTime, value, imgs})
      }
    }).catch(() => {
      Message.error('网络错误')
    })
  }
  showNoImg () {
    console.log(this.state.imgs.length, 2222)
    if (this.state.imgs.length === 0) {
      return (
        <div className="smallPicture"><div style={{textAlign: 'center',paddingTop: '58px'}}>暂无缩略图</div></div>
      )
    } else {
      this.state.imgs.map(a => {
        return <div className="smallPicture"><img src={a.url} alt=""/></div>
      })
    }
  }
  render () {
    return (
      <div className="skuCreatedDetail">
        <Breadcrumb data={['商品管理', '商品规格', 'sku生成页', '查看']}/>
        <div className="inputGroup">
          <label className="inputLabel">sku名称：</label>
          <Input placeholder="请输入产品名称" size="small" className="inputSmall" value={sessionStorage.skuName} disabled/>
        </div>
        <div className="inputGroup">
          <label className="inputLabel">sku库存量：</label>
          <Input placeholder="" size="small" className="inputSmall" value="1234" disabled value={this.state.repertory}/>
        </div>
        <div className="inputGroup">
          <label className="inputLabel">sku单位：</label>
          <Input placeholder="" size="small" className="inputSmall" value="12" disabled value={this.state.unit}/>
        </div>
        {/*缩略图*/}
        <div className="inputGroup">
          <label className="inputLabel">商品缩略图：</label>
          {this.showNoImg.call(this)}
        </div>
        {/*产品描述*/}
        <div className="inputGroup">
          <label className="inputLabel">商品描述：</label>
          <div className="quill">
            <div ref="textarea"></div>
          </div>
        </div>
        <div className="inputGroup">
          <label className="inputLabel">有效期：</label>
          <div className="inline-marginR-20"><Input placeholder="" size="small" className="inputSmall" disabled value={formatDate(new Date(this.state.startTime))}/></div>
          <Input placeholder="" size="small" className="inputSmall" disabled value={formatDate(new Date(this.state.endTime))}/>
        </div>
        {/* 状态 */}
        <div className="inputGroup">
          <label className="inputLabel">状态：</label>
          <Input placeholder="" size="small" className="inputSmall" value={this.state.status ? '已上架' : '未上架'} disabled/>
        </div>
      </div>
    )
  }
}
 export default withRouter(skuCreatedDetail)